
@import "elements.less";

//-----------------------------------------//
//                   fonts                 //
//-----------------------------------------//
@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('../font/helveticaneuelt-webfont.eot');
    src: url('../font/helveticaneuelt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/helveticaneuelt-webfont.woff') format('woff'),
         url('../font/helveticaneuelt-webfont.ttf') format('truetype'),
         url('../font/helveticaneuelt-webfont.svg#HelveticaNeueLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('../font/helveticaneueltstd-bdcn_1-webfont.eot');
    src: url('../font/helveticaneueltstd-bdcn_1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/helveticaneueltstd-bdcn_1-webfont.woff') format('woff'),
         url('../font/helveticaneueltstd-bdcn_1-webfont.ttf') format('truetype'),
         url('../font/helveticaneueltstd-bdcn_1-webfont.svg#HelveticaNeueLTStdCnBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueMediumCondBold';
    src: url('../font/helveticaneue-heavycond-webfont.eot');
    src: url('../font/helveticaneue-heavycond-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/helveticaneue-heavycond-webfont.woff') format('woff'),
         url('../font/helveticaneue-heavycond-webfont.ttf') format('truetype'),
         url('../font/helveticaneue-heavycond-webfont.svg#HelveticaNeueMediumCondBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

//-----------------------------------------//
//                 variables               //
//-----------------------------------------//
@blue-header: #d2faff;
@white : #ffffff;
@black: #000000;
@cyan : #3c909c;
@dark-cyan:#004953;
@light-grey:#909090;
@dark-grey:#525252;



//-----------------------------------------//
//                  mixins                 //
//-----------------------------------------//
.inner-colored-shadow(@horizontal:0, @vertical:1px, @blur:2px, @color: #000000) {
  -webkit-box-shadow: inset @horizontal @vertical @blur @color;
  -moz-box-shadow: inset @horizontal @vertical @blur @color;
  -o-box-shadow: inset @horizontal @vertical @blur @color;
  -ms-box-shadow: inset @horizontal @vertical @blur @color;
  box-shadow: inset @horizontal @vertical @blur @color;
}


.rounded-button(@border-color:#000000, @first-color:@black, @second-color:@white){
    .rounded(5px);
    .inner-colored-shadow(0, 1px, 1px, @white);
    //.drop-shadow(0, 1px, 2px, 0.75);
    border: 1px solid @border-color;
    .gradient(@first-color, @first-color, @second-color);
}

.box-shadow-none {
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

//-----------------------------------------//
//                  balises                //
//-----------------------------------------//
body{
    background: url('../img/background-body.jpg') repeat;
    font-family: 'HelveticaNeueLight';
    overflow-x: hidden;
}



h1{
    margin: auto;
    width:370px;
    font-size: 21pt;
    font-family: 'HelveticaNeueLTStdCnBold';
    line-height: 1.3em;
    font-weight: normal;

    strong{
        font-weight: normal;
    }
}

h2{
    margin-top:35px;
    margin-left: 20px;
    font-size: 19pt;
    font-family: 'HelveticaNeueLTStdCnBold';
    line-height: 1.3em;
    font-weight: normal;
}

h3{
    color: @dark-cyan;
    font-family: 'HelveticaNeueLTStdCnBold';
    font-size: 3em;
    margin-top: 60px;
    font-weight: normal;
}

input[type="radio"]{
    opacity: 0;
    float:left;
    width: 30px;
}

input[type="radio"] + label{
    font-size: 1.2em;
    color:@dark-grey;
    margin:0;
    clear:none;
    padding: 5px 0 4px 24px;
    cursor: pointer;
    background: url('../img/radio-button.png') left center no-repeat;

    .size{
        color:@light-grey;
    }
}

input[type="radio"]:checked + label{
    background-image: url('../img/radio-button-selected.png');
}

input[readonly]{
    background: @white;
}

input[type='checkbox']{
    opacity: 0;
    float: left;
    width:26px;
    margin-right: 3px;
}

input[type='checkbox'] + label{
    font-size: 1em;
    color:@dark-grey;
    margin:0;
    clear:none;
    padding: 5px 0 5px 0;
    cursor: pointer;
    background: url('../img/checkbox-unchecked.png') left center no-repeat;
}

input[type='checkbox']:checked + label{
    background-image: url('../img/checkbox-checked.png');
}

label{text-align: left;}

//-----------------------------------------//
//                  class                  //
//-----------------------------------------//
.cyan{
    color:@cyan;
}

.player-type{
    .rounded(20px);
    border: 8px solid #b8eff6;
    width:495px;
    height:77px;
    margin:auto;
    margin-top: 25px;

    .left-side{
        .border-radius(0, 0, 13px, 13px);
        border: 1px solid #bdbdbd;
        border-right: 1px solid #868686;
        height:77px;
        width:301px;
        float: left;
        .gradient(#9a9a9a, #9a9a9a, #d2d2d2);
        .inner-colored-shadow(0, 1px, 1px, #e1e1e1);
        text-align: center;
        #peckplayer-mini-container, #peckplayer-classic-container, #peckplayer-multi-container{
            margin: auto;
            margin-top:30px;
        }
    }

    .right-side{
        .border-radius(13px, 13px, 0, 0);
        border:1px solid #858585;
        border-left: 1px solid #d0d0d0;
        height:77px;
        width:190px;
        float: left;
        .gradient(#212121, #212121, #575757);
        .inner-colored-shadow(0, 1px, 1px, #8e8e8e);

        .pastille{
            float: left;
            margin-top:13px;
            margin-left: 15px;
        }

        .player-type-name{
            float: left;
            color:#787878;
            font-size: 20pt;
            margin-top:30px;
            text-align: center;
            width:120px;
            text-shadow:0 0 2px #000;
        }
    }
}

.float-left{
    float: left;
}

.step{
    margin-top:30px;
    margin-bottom:55px;
}

.step-title{
}

.step-title-content{
    float: left;
    font-family: 'HelveticaNeueLTStdCnBold';
    font-size: 1.7em;
    color:@dark-grey;
    margin-top: 30px;
    margin-left: 20px;
}

.pastille-number{
    @mon-padding:22px;
    .rounded(63px);
    border: 6px solid #b8eff6;
    background: #d2faff;
    color:@dark-grey;
    width:63px;
    height: 63-@mon-padding;
    text-align: center;
    font-size: 3em;
    font-family: 'HelveticaNeueLTStdCnBold';
    padding-top: @mon-padding;
    float: left;
}

.step-content{
    margin-top:15px;
    margin-left: 30px;
    color:@dark-grey;
    font-size: 1.2em;
}

.inline-container{
    float:left;
    width:160px;
    margin-left:20px;
    text-align: center;
}

.checkbox-container{
    width: 200px;
    margin-top: 20px;
}

.legend{
    margin-top: 5px;
}

.input-append{
    .add-on{
        background: @white;
    }
}

.sticky{
    position:fixed;
    top:40px;
    //right:1%;
}

.sticky-bottom{
    position:fixed;
   // position: absolute;
    //bottom: 40px;
}

.input-color{
    width:55px;
}

.input-track{
    color: @light-grey;
    vertical-align: text-top;
    padding-right: 2px;
}
.mp3-track{
    width: 30%;
    height: 15px;
    vertical-align: middle;
}
//-----------------------------------------//
//                  identifiant            //
//-----------------------------------------//

#header{
    background: url('../img/background-header.jpg') repeat;
    padding-bottom: 27px;
    font-family: 'HelveticaNeueLTStdCnBold';
    font-size: 2em;
    line-height: 1.3em;
    color: @white;
    z-index: 2;
    position: relative;

    #title{
        margin: auto;
        width:706px;
        margin-top:30px;
    }
}

 #header-border-bottom{
    background: url('../img/background-header-border.jpg') repeat;
    height:15px;
    z-index:3;
    position: relative;
    .drop-shadow(0, 5px, 5px, 0.75);
    width: 110%;
    margin-left: -5%;
}

#subheader{
    background: @blue-header;
    padding-bottom: 55px;
    font-family: 'HelveticaNeueLTStdCnBold';
    border-bottom: 1px solid @white;
}

#context{
    margin-top: 30px;
    color: @light-grey;
    font-size: 13pt;
    line-height: 1.3em;
}

#add-mp3-track{
    display: none;
    cursor: pointer;
}

#like-button{
    background: url('../img/like-button.png');
    width:217px;
    height:116px;
    margin-top: -50px;
    float: right;

    #like-button-content{
        margin: auto;
        text-align: center;
        color: #9a4038;
        font-size: 1.2em;

        a{
            display: block;
            height: 50px;
            margin-top:50px;
            color: #9a4038;
            padding-top: 14px;

        }
        a:hover{
            text-decoration: none;
            color: #C36058;
        }
    }
}

#download-container{
    position: relative;

    #download{
        position: absolute;
        top:110px;
        right:30px;
        margin: auto;
        border: 1px solid @light-grey;
        background: @white;
        width:308px;
        height: 408px;
        .rounded(5px);
        .drop-shadow(0, 4px, 3px, 0.43);

        #download-header{
            height:42px;
            .gradient(#004953, #004953, #008799);
            .border-radius(4px, 0, 0, 4px);
            .inner-colored-shadow(0, 1px, 1px, rgba(255, 255, 255, 0.5));
            border-top: 1px solid #008799;

            #download-header-content{
                margin-top: 10px;
                text-align: center;
                font-size: 1.5em;
                color:#3fbccd;
                text-shadow:0 -1px 1px #000000;
            }
        }

        #download-text{
            font-size: 1.4em;
            text-align: center;
            margin-top: 20px;
        }

        .download-buttons{
            .rounded-button(#a4a4a4, #9a9a9a, #d2d2d2);
            width:264px;
            height:60px;
            margin: auto;
            margin-top:35px;

            a{
                display: block;
                height: 60px;
                text-decoration: none;
                color:@white;
            }

            .icon{
                margin-top:22px;
                margin-left:15px;
                font-size: 4em;
                display: block;
                float: left;
                color:#3d3b39;
            }

            span{
                display: block;
                float: left;
                font-family: 'HelveticaNeueLTStdCnBold';
                font-size: 2em;
                margin-top: 20px;
                margin-left: 17px;
            }

            #wordpress{
                margin-left: 12px;
                margin-top: 8px;
                img{
                    margin-right:17px;
                }
            }
        }
    }
}

#builder{
    padding-bottom: 200px;
    position: relative;
    #custom-player{
        background: @white;
        .rounded(5px);
        .drop-shadow(0, 0, 3px, 0.43);
        width: 270px;
        padding-top: 35px;
        padding-bottom: 35px;

        #custom-player-container{
            text-align: center;
        }
    }

    #getcontainer{
        margin:auto;
        margin-top: 20px;
        display: inline-block;
        list-style-type:none;
        li{
            float: left;
            margin:0 20px 0 20px;
            #or{
                margin-top: 18px;
            }

            .getbutton{
                .rounded-button(#a4a4a4, #9a9a9a, #d2d2d2);
                width: 205px;
                height:55px;
                text-align: center;
                font-family: 'HelveticaNeueLTStdCnBold';
                font-size: 1.5em;
                text-shadow:0 -1px 1px #000000;
                a{
                    color:@white;
                    text-decoration: none;
                    padding-top: 17px;
                    display: block;
                    height: 38px;
                }
            }
        }
    }

    #click-here{
        margin-top: 40px;
        margin-left: 100px;
        .rounded-button(#004953, #004953, #008799);
        width: 205px;
        height:55px;
        text-align: center;
        font-family: 'HelveticaNeueLTStdCnBold';
        font-size: 1.5em;
        text-shadow:0 -1px 1px #000000;
        a{
            color:#3fbccd;
            text-decoration: none;
            padding-top: 17px;
            display: block;
            height: 38px;
        }
    }
    #volume-value, #volume-title{
        margin:38px 20px 0 20px;
        font-size: 1em;
        color:@dark-grey;
    }
    #volume{
        margin-top: 40px;
        width: 300px;
    }
}

#builder-output{
    resize: none;
    width: 98%;
    height: 350px;
    background-color: #F5F5F5;
    border: 0;
    .box-shadow-none;
}

#type-selection{
    font-size: 1em;
}

#mp3-list{
    width:480px;
    height: 100px;
    resize: none;
}

#mp3-list-legend{
    font-size: 0.8em;
    color: @light-grey;
}

#like-block{
    background: #1a1a1a;
    padding-top: 64px;

    #title-like{
        background: url('../img/background-title-like.png');
        width: 568px;
        height:96px;
        margin:auto;
        display: block;

        #title-like-inner{
            color:#94352d;
            font-family: 'HelveticaNeueLTStdCnBold';
            font-size: 3em;
            text-align: center;
            margin-top: 37px;
        }
    }
    #share-buttons-container{
        margin-top: 40px;
        text-align: center;
        #share-buttons{
            margin:auto;
            display: inline-block;
            list-style-type:none;
            li{
                float: left;
                margin:0 10px 0 10px;
                a{
                    display: block;
                    width: 120px;
                    height:120px;
                    float: left;
                }
            }
            #facebook{
                background: url('../img/share-buttons.png') 0 -360px no-repeat;
            }
            #facebook:hover{
                background-position: -120px -360px;
            }
            #twitter{
                background: url('../img/share-buttons.png') 0 -240px no-repeat;
            }
            #twitter:hover{
                background-position: -120px -240px;
            }
            #pinterest{
                background: url('../img/share-buttons.png') 0 -120px no-repeat;
            }
            #pinterest:hover{
                background-position: -120px -120px;
            }
            #googleplus{
                background: url('../img/share-buttons.png') 0 0 no-repeat;
            }
            #googleplus:hover{
                background-position: -120px 0;
            }
        }
    }

    #give-buttons-container{
        margin-top: 40px;
        text-align: center;
        #give-buttons{
            margin:auto;
            display: inline-block;
            list-style-type:none;
            li{
                float: left;
                margin:0 20px 0 20px;
                a{
                    display: block;
                    float: left;
                }
            }
            #flattr{
                background: url('../img/flattr.png') 0 0 no-repeat;
                width: 325px;
                height:71px;
            }
            #flattr:hover{
                background-position: -325px 0;
            }
            #paypal{
                background: url('../img/paypal.png') 0 0 no-repeat;
                width: 340px;
                height:96px;
            }
            #paypal:hover{
                background-position: -360px 0;
            }
        }
    }

    .title{
        margin-top: 60px;
        color:#a1a1a1;
        font-size: 3em;
        text-align: center;
    }
    #tweets-container{
        margin:auto;
        margin-top: 40px;
        text-align: center;
        max-width: 620px;
        #tweets{
            margin:auto;
            margin-bottom: 60px;
            display: inline-block;
            list-style-type:none;
            li{
                float: left;
                margin-top: 20px;
                a{
                    color:#004953;
                    text-decoration: none;
                }
                a:hover{
                    text-decoration: underline;
                }
            }
            .icon, .text{
                float: left;
            }
            .text{
                margin-left: 10px;
                margin-top: 5px;
                width: 250px;
                text-align: left;
            }
        }
    }
}

#footer{
    height:175px;
    color:#797979;
    a{
        color:#797979;
        text-decoration: underline;
    }
    a:hover{
        text-decoration: none;
    }
    #license{
        margin:auto;
        margin-top: 70px;
    }

    #copyright{
        margin: auto;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 980px) {
    [class*="span"], .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: auto;
    }
    #download-container{
        #download{
            position: relative;
            top:30px;
            right:inherit;
        }
    }
    #builder #getcontainer{
        width:205px;
        text-align: center;
        display: block;
        li{
            float:none;
            margin: 0;
        }
    }
    #custom-player{
        margin: auto;
        position: relative;
    }
}

@media only screen and (max-width: 767px) {
    body{
        padding-left: 0;
        padding-right: 0;
    }
    .container{
        padding-left: 5px;
        padding-right: 5px;
    }
    #header{
        #title{
            width:auto;
        }
    }

    #like-block #tweets-container{
        max-width: 308px;
    }
}

@media only screen and (max-width: 568px) {
    #like-block #title-like{
        background: none;
        width:auto;
    }
}
